<template>
    <div>
        <section class="user">
            <div class="user_options-container">
                <div class="user_options-text">
                    <div class="user_options-unregistered">
                        <h2 class="user_unregistered-title">没有账号？</h2>
                        <p class="user_unregistered-text">点击按钮注册账号.</p>
                        <button
                            class="user_unregistered-signup"
                            id="signup-button"
                            @click="
                                bounceLeft = true;
                                bounceRight = false;
                            "
                        >
                            注册
                        </button>
                    </div>

                    <div class="user_options-registered">
                        <h2 class="user_registered-title">已有账号?</h2>
                        <p class="user_registered-text">点击按钮登录账号.</p>
                        <button
                            class="user_registered-login"
                            id="login-button"
                            @click="
                                bounceLeft = false;
                                bounceRight = true;
                            "
                        >
                            登录
                        </button>
                    </div>
                </div>

                <div
                    class="user_options-forms"
                    id="user_options-forms"
                    :class="{
                        bounceLeft: bounceLeft,
                        bounceRight: bounceRight,
                    }"
                >
                    <div class="user_forms-login">
                        <h2 class="forms_title">登录</h2>
                        <form class="forms_form">
                            <fieldset class="forms_fieldset">
                                <div class="forms_field">
                                    <input
                                        type="text"
                                        placeholder="用户名"
                                        class="forms_field-input"
                                        required
                                        autofocus
                                        v-model="admin.account"
                                    />
                                </div>
                                <div class="forms_field">
                                    <input
                                        type="password"
                                        placeholder="密码"
                                        class="forms_field-input"
                                        required
                                        v-model="admin.password"
                                    />
                                </div>
                            </fieldset>
                            <div class="forms_buttons">
                                <button
                                    type="button"
                                    class="forms_buttons-forgot"
                                >
                                    忘记密码?
                                </button>
                                <button
                                    type="button"
                                    class="forms_buttons-action"
                                    @click="logins"
                                >
                                    登录
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="user_forms-signup">
                        <h2 class="forms_title">注册</h2>
                        <form class="forms_form">
                            <fieldset class="forms_fieldset">
                                <div class="forms_field">
                                    <input
                                        type="text"
                                        placeholder="用户名"
                                        class="forms_field-input"
                                        required
                                    />
                                </div>

                                <div class="forms_field">
                                    <input
                                        type="password"
                                        placeholder="密码"
                                        class="forms_field-input"
                                        required
                                    />
                                </div>
                            </fieldset>
                            <div class="forms_buttonx1s">
                                <input
                                    type="submit"
                                    value="注册"
                                    class="forms_buttons-action"
                                />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("admins");
export default {
    data() {
        return {
            admin: {},
            bounceLeft: false,
            bounceRight: true,
        };
    },
    components: {},
    methods: {
        ...mapActions(["login"]),
        async logins() {
            const data = await this.login(this.admin);
            console.log(data);
            // 登录将token保存到本地
            if (data.code == 200) {
                localStorage.token = data.token;
                this.open2();
                this.$router.push("/home");
            } else {
                this.$message.error("登录失败");
            }
        },
        open2() {
            this.$message({
                message: "登录成功",
                type: "success",
            });
        },
    },
};
</script>

<style scoped src="../../css/style.css">
</style>
